<div class="list-pf-item" ng-class="{ active: row.expanded }">
  <div class="list-pf-container" ng-click="row.toggleExpand($event)">
    <div class="list-pf-chevron">
      <div ng-include src=" 'views/overview/_list-row-chevron.html' " class="list-pf-content"></div>
    </div>
    <div class="list-pf-content">
      <div class="list-pf-name">
        <h3>
          <div class="component-label"><span>Virtual Machine</span></div>
          <optional-link link="{{row.apiObject._pod | navigateResourceURL}}">
            <span ng-bind-html="row.apiObject.metadata.name | highlightKeywords : row.state.filterKeywords"></span>
          </optional-link>
        </h3>
      </div>
      <div ng-if="row.state.showMetrics && (row.state.breakpoint === 'md' || row.state.breakpoint === 'lg') && row.apiObject._pod" class="list-pf-details">
        <metrics-summary
          pods="[row.apiObject._pod]"
          containers="row.apiObject._pod.spec.containers">
        </metrics-summary>
      </div>
      <div class="list-pf-details">
        <div ng-if="!row.expanded" vm-state ovm="row.apiObject"></div>
      </div>
    </div>
    <div class="list-pf-actions">
      <div class="dropdown-kebab-pf" uib-dropdown ng-if="row.actionsDropdownVisible()">
        <button uib-dropdown-toggle class="btn btn-link dropdown-toggle">
          <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          <span class="sr-only">Actions</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
          <dropdown-item action="row.startOvm()" enabled="{{row.canStartOvm()}}">Start</dropdown-item>
          <dropdown-item action="row.restartOvm()" enabled="{{row.canRestartOvm()}}">Restart</dropdown-item>
          <dropdown-item action="row.stopOvm()" enabled="{{row.canStopOvm()}}">Stop</dropdown-item>
          <li ng-if="row.OfflineVirtualMachineVersion | canI : 'delete'">
            <delete-link
              kind="OfflineVirtualMachine"
              group="{{row.OfflineVirtualMachineVersion.group}}"
              stay-on-current-page="true"
              resource-name="{{row.apiObject.metadata.name}}"
              project-name="{{row.projectName}}">
            </delete-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="list-pf-expansion collapse" ng-if="row.expanded" ng-class="{ in: row.expanded }">
    <div class="list-pf-container">

      <div class="word-break">
        <span class="vm-detail-key">State:</span>

        <span vm-state ovm="row.apiObject"></span>
        <span class="vm-detail-state-actions">
          <span class="bar-separated" ng-if="row.canStartOvm()">
            <a href="" ng-click="row.startOvm()">Start</a>
          </span>
          <span class="bar-separated" ng-if="row.canRestartOvm()">
            <a href="" ng-click="row.restartOvm()">Restart</a>
          </span>
          <span class="bar-separated" ng-if="row.canStopOvm()">
            <a href="" ng-click="row.stopOvm()">Stop</a>
          </span>
         </span>
      </div>

      <div class="word-break">
        <span class="vm-detail-key">Uptime:</span>
        <span class="vm-detail-value">{{ row.apiObject._pod | vmPodUptime }}</span>
      </div>

      <div class="word-break">
        <span class="vm-detail-key">Operating System:</span>
        <span class="vm-detail-value">{{row.apiObject.metadata.labels['kubevirt.io/os'] || '--'}}</span>
      </div>

    </div>
  </div>
</div>
